<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { navMenu } from './data/mockData.js';

const router = useRouter();
const isMenuOpen = ref(false);
const currentUser = ref(null);
const isLoggedIn = ref(false);

// 从本地存储获取用户信息
onMounted(() => {
  const savedUser = localStorage.getItem('currentUser');
  if (savedUser) {
    currentUser.value = JSON.parse(savedUser);
    isLoggedIn.value = true;
  }
});

// 切换菜单显示
const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value;
};

// 关闭菜单
const closeMenu = () => {
  isMenuOpen.value = false;
};

// 处理路由跳转
const handleNavClick = (path) => {
  closeMenu();
  router.push(path);
};

// 显示登录对话框
const showLogin = () => {
  closeMenu();
  // 存储当前路由，登录后返回
  localStorage.setItem('redirectAfterLogin', window.location.pathname);
  router.push('/login');
};

// 显示注册对话框
const showRegister = () => {
  closeMenu();
  router.push('/register');
};

// 登出处理
const logout = () => {
  localStorage.removeItem('currentUser');
  currentUser.value = null;
  isLoggedIn.value = false;
  closeMenu();
  router.push('/');
};
</script>

<template>
  <div id="app">
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="container">
        <!-- 网站Logo -->
        <div class="navbar-logo" @click="handleNavClick('/')">
          <span class="logo-icon">🌊</span>
          <span>威海旅游</span>
          <span class="logo-subtitle">Weihai Travel</span>
        </div>
        
        <!-- 移动端菜单按钮 -->
        <button class="menu-toggle" @click="toggleMenu">
          {{ isMenuOpen ? '✕' : '☰' }}
        </button>
        
        <!-- 导航菜单 -->
        <ul class="menu" :class="{ active: isMenuOpen }">
          <li 
            v-for="item in navMenu" 
            :key="item.id" 
            class="menu-item"
          >
            <a 
              href="javascript:void(0)" 
              @click="handleNavClick(item.path)"
              class="menu-link"
            >
              {{ item.name }}
              <span v-if="item.children && item.children.length > 0" class="submenu-arrow">▼</span>
            </a>
            
            <!-- 下拉子菜单 -->
            <ul v-if="item.children && item.children.length > 0" class="submenu">
              <li 
                v-for="child in item.children" 
                :key="child.id" 
                class="submenu-item"
              >
                <a 
                  href="javascript:void(0)" 
                  @click="handleNavClick(child.path)"
                >
                  {{ child.name }}
                </a>
              </li>
            </ul>
          </li>
        </ul>
        
        <!-- 登录注册按钮组 -->
        <div class="auth-buttons">
          <template v-if="isLoggedIn">
            <div class="user-profile">
              <span class="user-name">{{ currentUser?.username || '游客' }}</span>
              <button class="logout-btn" @click="logout">退出</button>
            </div>
          </template>
          <template v-else>
            <button class="login-btn" @click="showLogin">登录</button>
            <button class="register-btn" @click="showRegister">注册</button>
          </template>
        </div>
      </div>
    </nav>
    
    <!-- 主内容区域 -->
    <main class="main-content">
      <!-- 路由视图容器 -->
      <router-view />
    </main>
    
    <!-- 页脚 -->
    <footer class="footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-section">
            <h3 class="footer-title">关于威海旅游</h3>
            <p class="footer-text">
              威海旅游网是威海市官方旅游信息平台，为您提供全面的旅游攻略、景点介绍、美食推荐和文化体验等服务，让您的威海之旅更加丰富多彩。
            </p>
          </div>
          
          <div class="footer-section">
            <h3 class="footer-title">快速链接</h3>
            <ul class="footer-links">
              <li v-for="item in navMenu" :key="item.id">
                <a href="javascript:void(0)" @click="handleNavClick(item.path)">{{ item.name }}</a>
              </li>
            </ul>
          </div>
          
          <div class="footer-section">
            <h3 class="footer-title">联系我们</h3>
            <ul class="contact-info">
              <li class="contact-item">
                <span class="contact-icon">✉️</span>
                <a href="mailto:info@weihaitour.com" class="contact-link">info@weihaitour.com</a>
              </li>
              <li class="contact-item">
                <span class="contact-icon">📞</span>
                <a href="tel:06311234567" class="contact-link">0631-1234567</a>
              </li>
              <li class="contact-item">
                <span class="contact-icon">📍</span>
                <span class="contact-text">山东省威海市环翠区新威路1号</span>
              </li>
              <li class="contact-item">
                <span class="contact-icon">⏰</span>
                <span class="contact-text">周一至周日 9:00-18:00</span>
              </li>
            </ul>
          </div>
          
          <div class="footer-section">
            <h3 class="footer-title">关注我们</h3>
            <div class="social-links">
              <a href="#" class="social-link">
                <span class="social-icon">微信</span>
                <span class="social-name">威海旅游</span>
              </a>
              <a href="#" class="social-link">
                <span class="social-icon">微博</span>
                <span class="social-name">@威海旅游官微</span>
              </a>
              <a href="#" class="social-link">
                <span class="social-icon">抖音</span>
                <span class="social-name">威海旅游</span>
              </a>
            </div>
          </div>
        </div>
        
        <div class="footer-bottom">
          <p class="copyright">© 2024 威海旅游网 版权所有 | 鲁ICP备12345678号</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<style scoped>
/* 导航栏样式扩展 */
.navbar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
}

.logo-icon {
  font-size: 2rem;
}

.logo-subtitle {
  font-size: 1rem;
  font-weight: normal;
  color: var(--ocean-light);
  opacity: 0.9;
}

.menu-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.submenu-arrow {
  font-size: 0.7rem;
  transition: transform 0.3s ease;
}

.menu-item:hover .submenu-arrow {
  transform: rotate(180deg);
}

/* 用户个人资料样式 */
.user-profile {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-name {
  color: white;
  font-weight: 500;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logout-btn {
  background-color: transparent;
  color: white;
  border: 1px solid white;
  padding: 6px 15px;
  border-radius: 20px;
  font-size: 14px;
  transition: var(--transition);
}

.logout-btn:hover {
  background-color: white;
  color: var(--primary-color);
}

/* 主内容区域 */
.main-content {
  flex: 1;
  min-height: 60vh;
}

/* 页脚样式扩展 */
.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
}

.footer-section {
  color: var(--ocean-light);
}

.footer-title {
  color: white;
  margin-bottom: 20px;
  font-size: 1.2rem;
  position: relative;
  padding-bottom: 10px;
}

.footer-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: var(--accent-color);
}

.footer-text {
  color: var(--ocean-light);
  line-height: 1.8;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: var(--ocean-light);
  transition: var(--transition);
  display: inline-block;
}

.footer-links a:hover {
  color: white;
  transform: translateX(5px);
}

.contact-info {
  list-style: none;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 15px;
}

.contact-icon {
  font-size: 1.1rem;
  min-width: 20px;
}

.contact-link, .contact-text {
  color: var(--ocean-light);
}

.contact-link:hover {
  color: white;
  text-decoration: underline;
}

.social-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ocean-light);
  transition: var(--transition);
  padding: 8px;
  border-radius: var(--border-radius);
}

.social-link:hover {
  background-color: rgba(255,255,255,0.1);
  color: white;
}

.social-icon {
  min-width: 50px;
  font-size: 1rem;
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.2);
  color: var(--ocean-light);
  font-size: 0.9rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .navbar .container {
    padding: 12px 15px;
  }
  
  .navbar-logo {
    font-size: 1.2rem;
  }
  
  .logo-icon {
    font-size: 1.5rem;
  }
  
  .logo-subtitle {
    display: none;
  }
  
  .auth-buttons {
    gap: 5px;
  }
  
  .login-btn, .register-btn, .logout-btn {
    padding: 5px 12px;
    font-size: 13px;
  }
  
  .user-name {
    font-size: 13px;
    max-width: 80px;
  }
  
  .footer-content {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .footer-section {
    text-align: center;
  }
  
  .footer-title::after {
    left: 50%;
    transform: translateX(-50%);
  }
  
  .contact-item {
    justify-content: center;
    text-align: left;
  }
  
  .social-link {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .navbar-logo {
    font-size: 1rem;
  }
  
  .logo-icon {
    font-size: 1.2rem;
  }
  
  .menu-toggle {
    font-size: 1.2rem;
  }
  
  .auth-buttons {
    flex-direction: column;
    gap: 5px;
  }
  
  .footer {
    padding: 30px 0 20px;
  }
  
  .footer-bottom {
    font-size: 0.8rem;
  }
}

/* 动画效果 */
.navbar-logo {
  transition: transform 0.3s ease;
}

.navbar-logo:hover {
  transform: scale(1.05);
}

/* 滚动时导航栏样式变化 */
.navbar.scrolled {
  box-shadow: var(--shadow-lg);
  background-color: var(--primary-dark);
}
</style>
